// import React, { Component } from 'react';

// import {View ,Text } from 'react-native' ; 
// import {Hint} from 'iftide'

// export default class Hint_Demo extends Component {
//     constructor(props){
//         super(props)
//     }
//     render() {
//         return (
//            <View>
//                 <Hint
//                   title ={'提示文本'}
//                 />
//            </View>
//         )
//     }
// }

import React, { Component } from 'react';
import {  Label, Hint } from 'iftide';
import {
    TouchableOpacity,
    StyleSheet,
    View,
  
} from 'react-native';

export default class Hint_Demo extends Component {
    constructor() {
        super();
    };

    onClick() {
       
        Hint.show({

            title: '提示标题提示标题提示标题12313123',
            iconPosition: 'top',
            switchTime: true,
            switchTimeNumber: 5,
            margins: { left: 80 },
            location:[400,30]
        })

    }


    showHint() {
        this.hint._show();
    }


    closeHint=()=> {
        this.hint._close();
    }

    render() {

        return (
            <View>
                <View>

                    <Label text={'组件调用方式1：直接调用'} />
                    <View style={styles.container}>
                        <TouchableOpacity
                            style={{ padding: 10, height: 50 }}
                            onPress={() => this.onClick()}>
                            <Label text={'hint展示按钮'} type={'title'}></Label>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={{ padding: 10, height: 50 }}
                            onPress={() => Hint.hide()}>
                            <Label text={'hint关闭按钮'} type={'title'}></Label>
                        </TouchableOpacity>
                    </View>
                </View>


                <View>
                    <Label text={'组件调用方式1：通过组件调用'} />

                    <Hint
                        title={'提示标题提示提示标题提示提示标题提示'}
                        location={[200, 20,]}
                        radius={5}
                        iconPosition={'left'}
                        ref={(obj) => { this.hint = obj }}

                    />
                    <View style={styles.container}>
             
                        <TouchableOpacity
                            style={{ padding: 10, height: 50 }}
                            onPress={() => { this.showHint() }}
                             >
                            <Label text={'hint展示按钮'} type={'title'}></Label>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={{ padding: 10, height: 50 }}
                            onPress={() => this.closeHint()}
                            >
                            <Label text={'hint关闭按钮'} type={'title'}></Label>
                        </TouchableOpacity>
                    </View>


                </View>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        //justifyContent: 'center',
        // alignItems: 'center',

    },
});